<template>

    <div>
        <div class="content">

            <div class="minTitle">
                <div class="flag"></div>
                <div class="text">业绩预警</div>
            </div>


            <el-row class="form-query-box">
                <el-col :span="22" class="form-query">
                    <el-form ref="form" :model="formQuery" size="mini">
                        <el-col :span="7">
                            <el-form-item label="领域" label-width="140px">
                                <el-select size="mini" v-model="formQuery.category" @change="formQuery.categoryType='',formQuery.categoryId=''" placeholder="请选择">
                                    <el-option
                                    v-for="item in optionsData"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="岗位：" label-width="140px">
                                <el-select size="mini" v-model="formQuery.categoryType" @change="formQuery.categoryId=''" placeholder="请选择">
                                    <el-option
                                    v-for="item in categoryTypeOptions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="参评职称：" label-width="140px">
                                <el-select size="mini" v-model="formQuery.categoryId" placeholder="请选择">
                                    <el-option
                                    v-for="item in categoryOption"
                                    :key="item.id"
                                    :label="item.anotherName"
                                    :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                    </el-form>
                </el-col>

                <div class="query-bar">
                    <el-button ref="queryButton" type="primary" size="small" @click="commit()" round>提交申请</el-button>
                </div>

            </el-row>


            <!-- 申请成功 -->
            <div v-show="isApplyPassed" class="applyPassed">
                <img src="../../assets/informationEntry/passed.png">
                <div class="text">参评通过</div>
            </div>


            <!-- 申请不通过项 -->
            <div v-show="nonconformingDataList.length>0" class="nonconformingInfoList">
                <div class="title">以下信息项为职称评审未达标条件：</div>
                <div class="item" v-for="(item,index) in nonconformingDataList" :key="index">
                    <div v-html="item.clauseGroupName"></div>
                </div>
            </div>



        </div>


    </div>
</template>



<script>
    import { infoProcessing } from '../../service/personalInfoDataProcessing'
    import { applyForTitleFindResultPost,applyForTitleFindOptionsPost,applyForTitleSavePost } from '@/service/api'

    import Qs from 'qs'
    export default {
        name: "personnelInfo",
        data() {
            return {
                formQuery:{
                    category: '',     // 领域
                    categoryType: '', // 岗位
                    categoryId: ''    // 职称
                },
                optionsData:[],
                categoryTypeOptions:[], // 岗位Options
                categoryOption:[],       // 参评职称Options

                isApplyPassed:false,
                nonconformingDataList:[],
            }
        },
        created(){
            this.loadOptionsData();
        },
        methods:{
            // 加载options数据
            loadOptionsData(){
                applyForTitleFindOptionsPost().then(res => {
                    if(res.code == 200){
                        this.optionsData = res.data;
                        this.loadResult();
                    }
                });

            },
            // 加载评审结果
            loadResult(){
                applyForTitleFindResultPost().then(res => {
                    if(res.code == 200){

                        if(res.data.status == false){ // 未到"申请参评"时间
                            return;
                        }

                        this.formQuery.category     = res.data.record.categoryId;     // 领域
                        this.formQuery.categoryType = res.data.record.categoryChildId;          // 岗位
                        this.formQuery.categoryId   = res.data.record.categoryAcademicId   // 职称

                        if(res.data.record.firstCheckStatus == 1){ // 审核通过
                            this.isApplyPassed = true;
                            this.nonconformingDataList = [];
                        }else{
                            this.isApplyPassed = false;
                            this.nonconformingDataList  = res.data.record.notPassGroups;
                        }

                    }else{
                        this.nonconformingDataList = [];
                    }
                });
            },
            // 提交评审
            commit(queryObj){

                if(this.formQuery.categoryId.trim().length <= 0){
                    this.$message.error('请选择参评职称');
                    return;
                }

                applyForTitleSavePost(Qs.stringify(this.formQuery)).then(res => {
                    if(res.code == 200){

                        if(res.data.firstCheckStatus == 1){ // 审核通过
                            this.$message({message: '参评通过！',type: 'success'});
                            this.isApplyPassed = true;
                            this.nonconformingDataList = [];
                        }else{
                            this.isApplyPassed = false;
                            this.$message.error('参评未通过');
                            this.nonconformingDataList = res.data.notPassGroups;
                        }

                    }else{
                        this.nonconformingDataList = [];
                    }
                });
            },

        },
        watch:{

            'formQuery.category':{
                deep:true,
                handler: function (value) {
                    for(var i=0;i<this.optionsData.length;i++){
                        if(this.optionsData[i].id == value){
                            this.categoryTypeOptions = this.optionsData[i].childList;
                        }
                    }

                }
            },

            'formQuery.categoryType':{
                deep:true,
                handler: function (value) {
                    for(var i=0;i<this.categoryTypeOptions.length;i++){
                        if(this.categoryTypeOptions[i].id == value){
                            this.categoryOption = this.categoryTypeOptions[i].childList;
                        }
                    }

                }
            }
        }
    }
</script>

<style scoped>

 .content{
    min-height: 520px;
    height: 100%;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 9px 8px 2px rgba(43, 103, 254, 0.05);
    border-radius: 5px;
    overflow: hidden;
    margin-right: 10px;
    padding:31px 38px;
}

.minTitle{
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #31478f0d;
    padding: 14px 0px;
    border-top: solid 1px #f3f3f3;
    position:relative;
}
.minTitle>.flag{
    width: 3px;
    background: #31478F;
    margin: auto 22px;
    height: 18px;
}
.minTitle>.text{
    color: #31478F;
    font-weight: bold;
    font-size: 17px;

}


.form-query-box {
    height: 50px;
    margin: 26px 0px;
    margin-bottom: 38px;
    position: relative;
    /*overflow: hidden;*/
}
.form-query {
    margin-top: 20px;
}

.query-bar {
    margin-top: 18px;
    position: absolute;
    right: 30px;
}

.query-bar >>> .el-button {
    width: 80px;
}


.applyPassed{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 150px;
}
.applyPassed>img{
    height: 100px;
}
.applyPassed>.text{
    margin-top: 20px;
    font-size: 30px;
    color: #627dcb;
    font-weight: bold;
}

.nonconformingInfoList{
    padding: 10px;
}
.nonconformingInfoList>.title{
    font-weight: bold;
    margin-bottom: 10px;
}
.nonconformingInfoList>.item{
    padding-bottom: 6px;
    font-size: 15px;
}


</style>
